<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body class="">
	
	<header class="mui-bar mui-bar-nav public-green-bgcolor header-no-shadow header-txt-color">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">开通会员</h1>
	</header>
	
	<div class="mui-content">
	    <div class="open-vid-div">
	    	<!--选项卡-->
	    	<div class="mui-row" id="navigation">
	    		<div class="mui-col-xs-6 vip1">
		            <div class="vip-box active">
		            	<span class="mui-icon iconfont_city icon-huangguan"></span>
		            	<p>普通会员</p>
		            </div>
		        </div>
		        <div class="mui-col-xs-6 vip1">
		            <div class="vip-box">
		            	<span class="mui-icon iconfont_city icon-vip"></span>
		            	<p>超级会员</p>
		            </div>
		        </div>
	    	</div>
	    	
	    	<div class="chose_content">
	        	<ul class="mui-table-view mui-table-view-radio">
        	        <li class="mui-table-view-cell mui-selected">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">一个月</span>
        	                <span class="mui-pull-right public-color2">￥10</span>
        	            </a>
        	        </li>
        	        <li class="mui-table-view-cell">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">三个月</span>
        	                <span class="mui-pull-right public-color2">￥28</span>
        	            </a>
        	        </li>
        	        <li class="mui-table-view-cell">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">一年</span>
        	                <span class="mui-pull-right public-color2">￥108</span>
        	            </a>
        	        </li>
        	    </ul>
	        </div>
	        
	        <div class="chose_content" style="display: none;">
	        	<ul class="mui-table-view mui-table-view-radio">
        	        <li class="mui-table-view-cell">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">一个月</span>
        	                <span class="mui-pull-right public-color2">￥30</span>
        	            </a>
        	        </li>
        	        <li class="mui-table-view-cell mui-selected">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">三个月</span>
        	                <span class="mui-pull-right public-color2">￥88</span>
        	            </a>
        	        </li>
        	        <li class="mui-table-view-cell">
        	            <a class="mui-navigate-right">
        	                <span class="small-txt">一年</span>
        	                <span class="mui-pull-right public-color2">￥338</span>
        	            </a>
        	        </li>
        	    </ul>
	        </div>
	        
	        
	        <div class="vip-rmb" style="padding: 10px;">
	        	<p>需话费:  <span class="public-color2">￥30</span></p>
	        </div>
	        
	        <div class="vip-pay">
	        	<button>微信支付</button>
	        	<button>支付宝支付</button>
	        </div>
	    </div>
	</div>


<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src='../js/my_plugin.js'></script>
<script>
	castapp.init();
	
	var $navigationEles = $('#navigation .vip1');
	var $chose_contentElems = $('.chose_content');
	$navigationEles.on('tap',function(e){
		e.stopPropagation();
		$(this).find('.vip-box').addClass('active').parent()
		.siblings().find('.vip-box').removeClass('active');
		var index = $(this).index();
		$chose_contentElems.eq(index).fadeIn(1)
		.siblings('.chose_content').fadeOut(1);
	});
	
</script>
</body>
</html>